<template>
  <div class="body-connect">
    <div class="body-title">
      设备接入
    </div>
    <div class="body-content">
      <div>
        <div>未校验</div>
        <div>{{data.uncheck | num}}</div>
      </div>
      <div>
        <div>已通过</div>
        <div>{{data.checked | num}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getIsDevice } from '@/api/home/index.js';

export default {
  name: 'connect',
  components: {},
  data() {
    return {
      data: {
        checked: 0,
        uncheck: 0,
      },
    };
  },
  computed: {},
  created() {
    // if (process.client){}
  },
  filters: {
    num: (num) => {
      num = (num || 0).toString();
      let number = 0,
        floatNum = '',
        intNum = '';
      // 判断是否有小数位，有则截取小数点后的数字
      if (num.indexOf('.') > 0) {
        number = num.indexOf('.'); // 获取小数点出现的位置
        floatNum = num.substr(number); // 截取arr.substr(form, length)
        intNum = num.substring(0, number); // 截取arr.substring(start, end)
      } else {
        intNum = num;
      }
      let result = [],
        counter = 0;
      intNum = intNum.split('');
      // 利用3的倍数，向数组插入','
      for (let i = intNum.length - 1; i >= 0; i--) {
        counter++;
        result.unshift(intNum[i]);
        if (!(counter % 3) && i != 0) {
          result.unshift(',');
        }
      }
      return result.join('') + floatNum || '';
    },
  },
  mounted() {
    this.getIsDevice();
  },
  beforeCreate() {},
  beforeMount() {},
  methods: {
    async getIsDevice() {
      const res = await getIsDevice();
      if (res.code == 200) {
        this.data = res.data;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
@import './css/index.scss';
.body-connect {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 12px;
  height: 180px;
  // padding: 0 0px 20px 0px;
  display: flex;
  flex-direction: column;
  // box-shadow: 0px 1px 10px 2px rgba(0, 21, 41, 0.35);
	// -webkit-box-shadow: 0px 1px 10px 2px rgba(0, 21, 41, 0.35);
  box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);
	-webkit-box-shadow: 1px 0px 5px 5px rgba(228, 230, 225, .6);
}
.body-content {
  flex: 1;
  display: flex;
  align-items: center;
  > div:nth-child(1) {
    border-right: 1px solid rgba(0, 0, 0, 0.06);
  }
  > div {
    flex: 1;

    > div:nth-child(1) {
      margin: 0 auto;
      width: 120px;
      font-size: 14px;
      font-weight: 400;
      color: #000000;
    }
    > div:nth-child(2) {
      margin: 10px auto;
      width: 120px;
      font-size: 30px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
}
</style>